.layout_header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  background-color: #108ee9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  padding: 0 20px;
  z-index: 2;
  box-shadow: 0px 5px 6px #727272;
  .layout_header_left_panel {
    display: flex;
    .layout_header_log {
      display: flex;
      align-items: center;
      line-height: 40px;
      .layout_header_log_image {
        height: 30px;
        width: 30px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .layout_header_log_title {
        text-decoration: none;
        color: white;
      }
    }
    .layout_header_nav {
      line-height: 40px;
    }
  }
  .layout_header_right_panel {
    display: flex;
    .layout_header_user_info {
      line-height: 40px;
      text-align: center;
      position: relative;
      cursor: pointer;
      a {
        color: white;
        text-decoration: none;
      }
      > ul {
        display: none;
        position: absolute;
        top: 40px;
        left: 50%;
        width: 100px;
        text-align: center;
        margin: 0;
        padding: 0;
        color: white;
        transform: translate(-50%, 0);
        background-color: #108ee9;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        > li:hover {
          background-color: rgba(255, 255, 255, 0.2);
        }
      }
    }
    .layout_header_user_info:hover {
      > ul {
        display: block;
        box-shadow: 5px 5px 6px #727272;
      }
    }
    .layout_header_links {
      line-height: 40px;
      margin-left: 20px;
      > a {
        text-decoration: none;
        color: white;
        font-size: 20px;
      }
    }
  }
}
.layout_body {
    position: fixed;
    left: 0;
    right: 0;
    top: 40px;
    bottom: 40px;
    overflow-x: auto;
    padding: 20px 20px 0;
    width: 100%;
    box-sizing: border-box;
  }
.layout_footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
}
